<template>

    <div style="height: 100%">
        <div>
            <div class="side_bar_title">
                <span class="side_bar_title_name">生长周期</span>
                <i class="el-icon-arrow-down side_bar_title_icon"></i>
            </div>
            <div id="growth_cycle">
                <el-row :gutter="86">
                    <el-col :span="4" class="growth_cycle_button">
                        <el-button size="small">播种期</el-button>
                    </el-col>
                    <el-col :span="4" class="growth_cycle_button">
                        <el-button size="small">发芽期</el-button>
                    </el-col>
                    <el-col :span="4" class="growth_cycle_button">
                        <el-button size="small">幼苗期</el-button>
                    </el-col>
                    <el-col :span="4" class="growth_cycle_button">
                        <el-button size="small">发棵期</el-button>
                    </el-col>
                    <el-col :span="4" class="growth_cycle_button">
                        <el-button size="small">结薯期</el-button>
                    </el-col>
                    <el-col :span="4" class="growth_cycle_button">
                        <el-button size="small">成熟期</el-button>
                    </el-col>
                </el-row>
            </div>
            <!--                <div></div>-->
            <el-divider></el-divider>
        </div>

        <div>
            <div class="side_bar_title">
                <span class="side_bar_title_name">数据获取</span>
                <i class="el-icon-arrow-down side_bar_title_icon"></i>
            </div>
            <div id="acquisition_data">
                <el-row :gutter="86">
                    <el-col :span="4" class="acquisition_data_button">
                        <el-button size="small" type="primary" @click="startCollectData">开始</el-button>
                    </el-col>
                    <el-col :span="4" class="acquisition_data_button">
                        <el-button size="small" type="info" @click="pauseCollectData">暂停</el-button>
                    </el-col>
                    <el-col :span="4" class="acquisition_data_button">
                        <el-button size="small" type="success" @click="recoveryCollectData">恢复</el-button>
                    </el-col>
                    <el-col :span="4" class="acquisition_data_button">
                        <el-button size="small" type="danger" @click="stopCollectData">终止</el-button>
                    </el-col>
                </el-row>
            </div>
            <!--                <div></div>-->
            <el-divider></el-divider>
        </div>

        <div>
            <div class="side_bar_title">
                <span class="side_bar_title_name">浏览数据</span>
                <i class="el-icon-arrow-down side_bar_title_icon"></i>
            </div>
            <div id="data_charts">
                <el-row :gutter="0">
                    <router-link to="/show-environment">
                        <el-col :span="6" class="charts_details">
                            <el-image
                                    class="charts_icon"
                                    :src="require('../../static/pic/icon-environment.svg')"
                                    @load="initChartsIconSize($event)"
                                    fit="fit">
                            </el-image>
                            <div class="charts_font">环境指标</div>
                        </el-col>
                    </router-link>
                    <router-link to="/show-nutrition">
                        <el-col :span="6" class="charts_details">
                            <el-image
                                    class="charts_icon"
                                    :src="require('../../static/pic/icon-nutrition.svg')"
                                    @load="initChartsIconSize($event)"
                                    fit="fill">
                            </el-image>
                            <div class="charts_font">营养指标</div>
                        </el-col>
                    </router-link>
                    <router-link to="/show-yield">
                        <el-col :span="6" class="charts_details">
                            <el-image
                                    class="charts_icon"
                                    :src="require('../../static/pic/icon-yield.svg')"
                                    @load="initChartsIconSize($event)"
                                    fit="fill">
                            </el-image>
                            <div class="charts_font">产量指标</div>
                        </el-col>
                    </router-link>
                    <router-link to="/show-lot">
                        <el-col :span="6" class="charts_details">
                            <el-image
                                    class="charts_icon"
                                    :src="require('../../static/pic/icon-lot.svg')"
                                    @load="initChartsIconSize($event)"
                                    fit="fill">
                            </el-image>
                            <div class="charts_font">LOT指标</div>
                        </el-col>
                    </router-link>
                </el-row>
            </div>
            <!--                <div></div>-->
            <el-divider></el-divider>
        </div>

        <div>
            <div class="side_bar_title">
                <span class="side_bar_title_name">任务查看</span>
                <i class="el-icon-arrow-down side_bar_title_icon"></i>
            </div>
            <div id="">
                <el-row :gutter="0">
                    <router-link to="/show-task">
                        <el-col :span="6" class="charts_details">
                            <el-image
                                    class="charts_icon"
                                    :src="require('../../static/pic/icon-task.svg')"
                                    @load="initChartsIconSize($event)"
                                    fit="fit">
                            </el-image>
                            <div class="charts_font">任务查看</div>
                        </el-col>
                    </router-link>
                    <router-link to="/show-collect-task">
                        <el-col :span="6" class="charts_details">
                            <el-image
                                    class="charts_icon"
                                    :src="require('../../static/pic/icon-collectPlan.svg')"
                                    @load="initChartsIconSize($event)"
                                    fit="fill">
                            </el-image>
                            <div class="charts_font">采集计划</div>
                        </el-col>
                    </router-link>
                    <el-col :span="6" class="charts_details">
                        <div @click="showFileUpload">
                            <el-image
                                    class="charts_icon"
                                    :src="require('../../static/pic/icon-upload.svg')"
                                    @load="initChartsIconSize($event)"
                                    fit="fill">
                            </el-image>
                            <div class="charts_font">上传图片</div>
                        </div>
                    </el-col>
                </el-row>
            </div>
            <!--                <div></div>-->
            <el-divider></el-divider>
        </div>
        <el-dialog :visible.sync="openFileUpload" title="文件上传" width="50%" :modal-append-to-body='false'>
            <el-upload
                    style="display: inline-block"
                    class="upload-demo"
                    ref="upload"
                    action=""
                    :multiple="false"
                    :on-remove="handleRemove"
                    :on-progress="progressA"
                    :on-change="getMD5"
                    :http-request="customUpload"
                    :file-list="fileList"
                    :show-file-list="true"
                    multiple
                    drag
                    :auto-upload="true">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text" style="vertical-align: middle;"><p>将文件拖到此处，或<em>点击上传</em></p></div>
            </el-upload>
        </el-dialog>
    </div>

</template>

<script>
    import SparkMD5 from 'spark-md5'
    export default {
        name: "side-navigation",
        data(){
            return{
                openFileUpload: false,
                fileList: [],
                md5: '',
                fileTable: [{
                    fileName: '文件名',
                    speed: '进度'
                }]
            }
        },
        methods: {
            /**     动态加载图标大小     **/
            initChartsIconSize(event) {
                let marginLeft = document.getElementsByClassName('el-row').item(0).style.marginLeft;
                let width = document.getElementsByClassName('charts_details').item(0).clientWidth;
                width = width + Number.parseFloat(marginLeft) + 'px';
                this.$set(event.currentTarget.style, 'height', width);
                this.$set(event.currentTarget.style, 'width', width);


            },
            /**     开始采集数据
            涉及后端密钥暂时不能用     **/
            startCollectData(){
                this.$http({
                    url: this.$http.adornUrl('/gengyun/acquisition/start'),
                    method: 'get',
                    params: this.$http.adornParams({
                    })
                }).then(({data}) => {
                    this.$message({
                        message: data.data,
                        type: 'success'
                    })
                })
            },
            /**     暂停采集数据
            涉及后端密钥暂时不能用     **/
            pauseCollectData(){
                this.$http({
                    url: this.$http.adornUrl('/gengyun/acquisition/pause'),
                    method: 'get',
                    params: this.$http.adornParams({
                    })
                }).then(({data}) => {
                    this.$message({
                        message: data.data,
                        type: 'success'
                    })
                })
            },
            /**     重新采集数据
            涉及后端密钥暂时不能用     **/
            recoveryCollectData(){
                this.$http({
                    url: this.$http.adornUrl('/gengyun/acquisition/resume'),
                    method: 'get',
                    params: this.$http.adornParams({
                    })
                }).then(({data}) => {
                    this.$message({
                        message: data.data,
                        type: 'warning'
                    })
                })
            },
            /**     停止采集数据
            涉及后端密钥暂时不能用     **/
            stopCollectData(){
                this.$http({
                    url: this.$http.adornUrl('/gengyun/acquisition/stop'),
                    method: 'get',
                    params: this.$http.adornParams({
                    })
                }).then(({data}) => {
                    this.$message({
                        message: data.data,
                        type: 'warning'
                    })
                })
            },
            /**     唤醒上传文件弹出框     **/
            showFileUpload(){
                // alert('hh')
                this.openFileUpload = true
            },
            /**     上传文件     **/
            customUpload(file) {
                let FormDatas = new FormData();
                console.log(file);
                FormDatas.append('file', file.file);
                FormDatas.append('name', file.file.name);
                FormDatas.append('size', file.file.size);
                FormDatas.append('md5', this.md5);
                var md5 = this.md5;
                console.log(md5);
                console.log(file)
                this.$http({
                    url: '/BigFile',
                    method: 'post',
                    data: FormDatas,
                    //上传进度
                    onUploadProgress: (progressEvent) => {
                        let num = progressEvent.loaded / progressEvent.total * 100 | 0;  //百分比
                        file.onProgress({percent: num})     //进度条
                    }
                }).then(data => {
                    file.onSuccess(); //上传成功(打钩的小图标)
                })
            },
            /**     文件正在上传时的钩子    **/
            progressA(event, file) {
            },
            /**     移除上传文件    **/
            handleRemove(file) {
                this.$refs.upload.abort(); //取消上传
                this.$message({message: '成功移除' + file.name, type: 'success'});
            },
            /**     上传文件后端可能需要md5加密,注意是    可能     **/
            getMD5(file) {
                //console.log(file)
                const _this = this
                var fileReader = new FileReader();
                //此处打印file可看到file下的raw为文件属性
                var dataFile = file.raw;
                let blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice
                var spark = new SparkMD5.ArrayBuffer();
                //获取文件二进制数据
                fileReader.readAsArrayBuffer(dataFile)

                //异步执行函数
                fileReader.onload = function (e) {
                    spark.append(e.target.result);
                    var md5 = spark.end()
                    console.log(md5)
                    //此处this指向发生改变，需提前声明const _this = this
                    _this.md5 = md5; //此处是将文件的md5值放入imgdata中
                    //上传图片，如手动上传可不在此处执行
                    // _this.upload('frontImg')
                }
            }
        }
    }
</script>

<style scoped>

</style>